<!DOCTYPE html>
<html>
<head>
    <title>文章库基础信息</title>
    <#include "/header.html">

    <!-- 引入相关js文件 -->
    <script type="text/javascript" charset="utf-8"
            src="${request.contextPath}/statics/plugins/edit135/ueditor.config.js"></script>
    <!--    <script type="text/javascript" charset="utf-8" src="${request.contextPath}/statics/plugins/edit135/third-party/jquery-3.3.1.min.js"></script>-->
    <script type="text/javascript" charset="utf-8"
            src="${request.contextPath}/statics/plugins/edit135/ueditor.all.min.js"></script>
    <script type="text/javascript" charset="utf-8"
            src="${request.contextPath}/statics/plugins/edit135/a92d301d77.js"></script>
    <script type="text/javascript" charset="utf-8"
            src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.0.min.js"></script>
    <!-- 引入相关css文件 -->
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/plugins/edit135/themes/96619a5672.css"/>
</head>
<body>
<style>
    th {
        text-align: center;
    }

    .t-wrapper {
        display: flex;
    }

    .t-wrapper .t-sidebar {
        flex-basis: 220px;
        margin-right: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .t-wrapper .t-main {
        flex-grow: 1;
    }

    .t-wrapper .t-handle {
        display: flex;
        justify-content: space-between;
    }

    .t-wrapper .t-handle .btn-default {
        width: 65px;
    }

    .t-wrapper .t-menu {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }

    .t-wrapper .t-menu > a {
        border-radius: 0;
        border-top: none;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .t-wrapper .t-menu > a:first-child {
        border-top: 1px solid #ccc;
    }

    .t-wrapper .t-menu > a.active {
        background: #E0E0E0;
    }

    .t-wrapper .t-main .grid-btn {
        margin-bottom: 20px;
    }

    .t-wrapper .t-main .t-refer .form-control {
        width: 250px;
        float: left;
        margin-right: 10px;
    }

    .my-select {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 34px;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .my-select:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    }

    img.upfile {
        position: relative;
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 1px solid #367FA9;
    }
</style>
<div id="rrapp" v-cloak>
    <div v-show="showList == 1" class="t-wrapper">
        <div class="t-sidebar">
            <div class="t-handle">
                <input type="button" class="btn btn-default" @click="addType" value="新增"/>
                <input type="button" class="btn btn-default" @click="updateType" value="修改"/>
                <input type="button" class="btn btn-default" @click="delType" value="删除"/>
            </div>
            <div class="t-menu">
                <a class="btn btn-default" v-for="(item,index) in bArticleTempTypeLists" :key="index"
                   :class="{active:item.id == isA}" @click="clickActive(item.id)">{{item.typeName}}</a>
            </div>
        </div>
        <div class="t-main">
            <div class="grid-btn t-refer">
                <input class="form-control" placeholder="可输入模板文章标题进行查询" v-model="isT"/>
                <input type="button" class="btn btn-default" style="float: left" @click="query" value="查询"/>
                <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增模板</a>
                <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改模板</a>
                <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除模板</a>
            </div>

            <table id="jqGrid"></table>
            <div id="jqGridPager"></div>
        </div>
    </div>

    <div v-show="showList == 2" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-2 control-label">标题</div>
                <div class="col-sm-10">
                    <input maxlength="50" type="text" class="form-control" v-model="bArticleTemp.articleTitle"
                           placeholder="模板文章标题" id="articleTitle"/>
                </div>
                <input style="position: absolute;width: 150px"
                       onclick="insertAtCursor(document.getElementById('articleTitle'), '#BN#')" type="button"
                       value="添加品牌占位符" class="btn btn-primary">
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">类型</div>
                <div class="col-sm-10">
                    <select name="" id="" v-model="bArticleTemp.articleTypeId" class="my-select">
                        <option value="-1" selected hidden>请选择所属模板分类</option>
                        <option v-for="(item,index) in bArticleTempTypeLists" :key="index" :value="item.id">
                            {{item.typeName}}
                        </option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">配文</div>
                <div class="col-sm-10">
                    <textarea class="form-control" v-model="bArticleTemp.articleDesc" placeholder="模板文章配文"
                              rows="4" maxlength="500" id="articleDesc"></textarea>
                </div>
                <input style="position: absolute;width: 150px"
                       onclick="insertAtCursor(document.getElementById('articleDesc'), '#BN#')" type="button"
                       value="添加品牌占位符" class="btn btn-primary">
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">缩略图</div>
                <div class="col-sm-10">
                    <img :src="bArticleTemp.articleImgUrl" class="upfile" id="imgUrl"/>
                    <input type="file" accept="image/png,image/jpg,image/jpeg" class="form-control" value="选择海报底图"
                           placeholder="模板文章缩略图" onchange="insertImg(this, 'BArticleTemp')"/>
                </div>
                <input onclick="copyForBN(2)" type="button" value="复制品牌模板占位符" class="btn btn-primary"
                       style="position: absolute;margin-top: 100px;">
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">内容</div>
                <div class="col-sm-10">
                    <div class="form-group">
                        <script id="editor" type="text/plain" style="width:1024px;"></script>
                    </div>
                    <!--                    <textarea class="form-control" v-model="bArticleTemp.articleContent" placeholder="模板文章内容"-->
                    <!--                              rows="4" maxlength="500"></textarea>-->
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">状态</div>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="status" value="0" v-model="bArticleTemp.status"/> 隐藏
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="status" value="1" v-model="bArticleTemp.status"/> 显示
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">排序</div>
                <div class="col-sm-10">
                    <input type="number" class="form-control" v-model="bArticleTemp.orderNum" placeholder="排序、数字越大越靠前"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">创建者</div>
                <div class="col-sm-10">
                    <input disabled type="text" class="form-control" v-model="bArticleTemp.createBy" placeholder="创建者"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">创建时间</div>
                <div class="col-sm-10">
                    <input disabled type="text" class="form-control" v-model="bArticleTemp.createTime"
                           placeholder="创建时间"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">备注</div>
                <div class="col-sm-10">
                    <textarea class="form-control" v-model="bArticleTemp.remark" placeholder="模板文章备注"
                              rows="4" maxlength="500"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
            </div>
        </form>
    </div>

    <div v-show="showList == 3" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-2 control-label">分类名称</div>
                <div class="col-sm-10">
                    <input maxlength="50" type="text" class="form-control" v-model="bArticleTempType.typeName"
                           placeholder="分类名称"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">状态</div>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="statusType" value="0" v-model="bArticleTempType.status"/> 隐藏
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="statusType" value="1" v-model="bArticleTempType.status"/> 显示
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">排序</div>
                <div class="col-sm-10">
                    <input type="number" class="form-control" v-model="bArticleTempType.orderNum"
                           placeholder="排序、数字越大越靠前"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">创建者</div>
                <div class="col-sm-10">
                    <input disabled type="text" class="form-control" v-model="bArticleTempType.createBy"
                           placeholder="创建者"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">创建时间</div>
                <div class="col-sm-10">
                    <input disabled type="text" class="form-control" v-model="bArticleTempType.createTime"
                           placeholder="创建时间"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">备注</div>
                <div class="col-sm-10">
                    <textarea class="form-control" v-model="bArticleTempType.remark" placeholder="模板文章备注"
                              rows="4" maxlength="500"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" @click="saveOrUpdateType" value="确定"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="closeType" value="返回"/>
            </div>
        </form>
    </div>
</div>
<script src="${request.contextPath}/statics/js/modules/sys/barticletemp.js?_${.now?long}"></script>
<script>
    vm.reloadType();

    $(function () {
        $("#jqGrid").jqGrid({
            url: baseURL + 'sys/barticletemp/list',
            datatype: "json",
            colModel: [
                {label: 'id', name: 'id', index: 'id', align: "center", width: 50, key: true},
                {label: '标题', name: 'articleTitle', index: 'article_title', align: "center", width: 80},
                {label: '所属分类', name: 'articleTypeName', index: 'articleTypeName', align: "center", width: 80},
                // { label: '文章概述', name: 'articleDesc', index: 'article_desc',align: "center", width: 80 },
                // { label: '文章内容', name: 'articleContent', index: 'article_content',align: "center", width: 80 },
                // { label: '文章缩略图', name: 'articleImgUrl', index: 'article_img_url',align: "center", width: 80 },
                // { label: '排序', name: 'orderNum', index: 'order_num',align: "center", width: 80 },
                {label: '创建人', name: 'createBy', index: 'create_by', align: "center", width: 80},
                {label: '创建时间', name: 'createTime', index: 'create_time', align: "center", width: 80},
                {
                    label: '状态', name: 'statusName', index: 'statusName', align: "center", width: 80,
                    formatter: function (value, options, rowData) {
                        if (value == "删除") {
                            return "<span style=\"color: red\">" + value + "</span>";
                        } else {
                            return value;
                        }
                    }
                },
                // { label: '修改者', name: 'updateBy', index: 'update_by',align: "center", width: 80 },
                // { label: '修改时间', name: 'updateTime', index: 'update_time',align: "center", width: 80 },
                {
                    label: '操作', name: 'status', index: 'status', align: "center", width: 120,
                    formatter: function (value, options, rowData) {
                        let id = rowData["id"];
                        let content = "";
                        content += "<input type=\"button\" class=\"btn btn-primary\" onclick=\"vm.updateById(" + id + ")\" value=\"修改\"/>";
                        if (value == 1) {
                            return content + "<input type=\"button\" class=\"btn btn-warning\" onclick=\"vm.status(" + id + ",0)\" value=\"删除\"/>";
                        } else {
                            return content + "<input type=\"button\" class=\"btn btn-warning\" onclick=\"vm.status(" + id + ",1)\" value=\"恢复\"/>";
                        }
                    }
                },
            ],
            viewrecords: true,
            height: 520,
            rowNum: 15,
            rowList: [15, 30, 50],
            rownumbers: true,
            rownumWidth: 25,
            autowidth: true,
            multiselect: true,
            pager: "#jqGridPager",
            jsonReader: {
                root: "page.list",
                page: "page.currPage",
                total: "page.totalPage",
                records: "page.totalCount"
            },
            prmNames: {
                page: "page",
                rows: "limit",
                order: "order"
            },
            gridComplete: function () {
                //隐藏grid底部滚动条
                $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
            }
        });

        function status(e, x) {

            let bArticleTemp = {
                id: e,
                status: x,
            };
            confirm('确定要删除选中的记录？', function () {
                $.ajax({
                    type: "POST",
                    url: baseURL + url,
                    contentType: "application/json;charset=UTF-8",
                    data: JSON.stringify(bArticleTemp),
                    success: function (r) {
                        if (r.code === 0) {
                            alert('操作成功', function (index) {
                                vm.reload();
                            });
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            });
        }

        setTimeout(
            function () {
                let appkey = '5e0d699a-3170-4210-b676-6dbbac10c65d';
                window.BASEURL = 'http://www.135editor.com';
                window.UEDITOR_HOME_URL = "/ueditor/jsp/upload/image/";
                window.current_editor = UE.getEditor('editor', {
                    plat_host: 'www.135editor.com',
                    appkey: appkey, open_editor: true, pageLoad: true,
                    style_url: BASEURL + '/editor_styles/open?inajax=1&appkey=' + appkey,
                    style_width: 340,
                    uploadFormData: {'referer': window.document.referrer},
                    initialFrameHeight: 680,
                    zIndex: 1000,
                    focus: true,
                    autoFloatEnabled: false, autoHeightEnabled: false, scaleEnabled: false,
                    focusInEnd: true
                });
            }, 1000
        );

        //编辑器加载完成之后
        window.current_editor.addListener('ready', function (editor) {
            // var url = location.search;
            // var articleId = url.split("=")[1];
            // if (articleId != 0) {
            //     loadData(articleId);
            // }
        });
    });

    function insertAtCursor(myField, myValue) {
        //IE 浏览器
        if (document.selection) {
            myField.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
            sel.select();
        }

        //FireFox、Chrome等
        else if (myField.selectionStart || myField.selectionStart == '0') {
            var startPos = myField.selectionStart;
            var endPos = myField.selectionEnd;

            // 保存滚动条
            var restoreTop = myField.scrollTop;
            myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);

            if (restoreTop > 0) {
                myField.scrollTop = restoreTop;
            }

            myField.focus();
            myField.selectionStart = startPos + myValue.length;
            myField.selectionEnd = startPos + myValue.length;
        } else {
            myField.value += myValue;
            myField.focus();
        }
    }


    function copyForBN(type) {
        let oInput = document.createElement('input');
        let text = "";
        if (type == 1) {
            oInput.value = "#BN#";
            text = "品牌占位符";
        }

        if (type == 2) {
            oInput.value = "#BRAND_CONTENT_TEMPLATE#";
            text = "品牌内容模板占位符";
        }

        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';
        oInput.style.display = 'none';
        alert('复制' + text + '成功！');
    }

    function loadData(e) {
        console.log("e:" + e);
        $.get(baseURL + "sys/barticleinfo/info/" + e, function (r) {
            vm.bArticleInfo = r.bArticleInfo;
            window.current_editor.setContent(r.bArticleInfo.articleContent);
        })
    }

    function getFileExtendingName(filename) {
        // 文件扩展名匹配正则
        var reg = /\.[^\.]+$/;
        var matches = reg.exec(filename);
        if (matches) {
            return matches[0];
        }
        return '';
    }

    function datePath() {
        // 组装文件名
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        return year + "" + month + "" + day;
    }

    function insertImg(e, namePath) {
        let files = e.files;
        let length = files.length;
        upload(files[0], namePath);
    }

    function upload(file, namePath) {
        console.log(file);
        var client = new window.OSS({
            region: 'oss-cn-shenzhen', // 你的oss地址，hangzhou，shanghai，shenzhen
            accessKeyId: 'LTAI4Fh7PnYLw3uQvoUYiazS', //你的ak
            accessKeySecret: 'cEw7e8QMz0h4XY4qmzCoTzhHITqyUU', //你的secret
            //stsToken: '<Your securityToken(STS)>',//这里我暂时没用，注释掉
            bucket: 'zktuistatic', //你的oss名字
        });

        let key = namePath + "/" + datePath() + "/image" + String(parseInt(Math.random() * 10000000, 10) + getFileExtendingName(
            file.name));

        client.put(key, file).then(function () {
            return client.get(key);
        }).then(function (ret) {
            console.log(ret.res.requestUrls[0]);
            let reqUrl = ret.res.requestUrls[0].replace("http://zktuistatic.oss-cn-shenzhen.aliyuncs.com/", "http://zktfile.wxslzf.com/");
            console.log(namePath);
            if (namePath == "BArticleTemp") {
                //
                let imgUrl = document.getElementById('imgUrl');
                vm.bArticleTemp.articleImgUrl = reqUrl;
                imgUrl.src = vm.bArticleTemp.articleImgUrl;
            }

        }).catch(function (err) {
            console.log(err);
        });
    }
</script>
</body>
</html>
